<template>
  <div class="cfg-toolbar-floatMenu-menu-outline">
    <Icon type="md-apps" class="cfg-toolbar-floatMenu-menu-icon" @click.native="menuShow=!menuShow"/>
    <transition>
      <div v-show="menuShow" class="cfg-toolbar-floatMenu-menu">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
    export default {
        name: 'toolbar-floatMenu',
        components: {},
        data () {
            return {
                menuShow: false
            }
        },
        props: {
            show: {
                default: () => {
                    return false;
                }
            }
        },
        watch: {
            show: {
                handler () {
                    this.menuShow = !this.menuShow;
                },
                immediate: true
            }
        },
        methods: {

        }
    }
</script>

<style scoped lang="scss">
.cfg-toolbar-floatMenu-menu-outline {
  margin:0 5px;
  width:20px;
  height:20px;
}
.cfg-toolbar-floatMenu-menu-icon {
  font-size:20px;
}
.cfg-toolbar-floatMenu-menu {
  display: block;
  position: relative;
  left:0px;
  top:0px;
  z-index:999;
  transition: all 0.2s ease-in-out;
}
</style>
